// js/pages/ProfilePage.js
import BasePage from './BasePage.js';
import TextRenderer from '../utils/TextRenderer.js';

export default class BattleStatistics extends BasePage {
  constructor(canvas, ctx, pageManager, resourceManager, screenAdapter, api, userManager) {
    super(canvas, ctx, pageManager, resourceManager, screenAdapter);
    this.api = api;
    this.userManager = userManager;
    this.textRenderer = new TextRenderer(ctx, screenAdapter)
    // 当前选中的菜单索引
    this.selectedMenuIndex = 0;
    this.menus = null
  }

  onInit() {
    return Promise.resolve();
  }

  /**
 * 重写 initialize 方法，而不是 onShow
 */
  async initialize() {
    // 执行所有异步初始化任务
    await this.initializeUI();
    //await this.fetchGameData();
  }

  initializeUI() {

  }

  render() {
    // 横屏个人页面背景
    const shareBg = this.resourceManager.getImage('shareBg');
    this.ctx.drawImage(shareBg, 0, 0, this.screenAdapter.DESIGN_WIDTH, this.screenAdapter.DESIGN_HEIGHT);
    //绘制用户头像
    const avatar = this.resourceManager.getImage('defaultAvatar');
    this.ctx.drawImage(avatar, 38, 66, 112, 112);
    //绘制右下角LOG
    const shareBottomIcon = this.resourceManager.getImage('shareBottomIcon');
    this.ctx.drawImage(shareBottomIcon, 0, 1160, 750, 464);
    //绘制右下角LOG
    const shareCircle = this.resourceManager.getImage('shareCircle');
    this.ctx.drawImage(shareCircle, 414, 1118, 320, 320);
    //绘制右下角LOG
    const shareBtn = this.resourceManager.getImage('shareBtn');
    this.ctx.drawImage(shareBtn, 456, 1414, 234, 68);
    //绘制右下角LOG
    // const QrGameCode = this.resourceManager.getImage('QrGameCode');
    // this.ctx.drawImage(QrGameCode, 428, 1132, 292, 292);
    this.textRenderer.drawText(this.userManager.getUserData.user_name, 170, 88, `28px ${this.textRenderer.systemFont}`, '#fff', 'left', 'top')
    this.textRenderer.drawText('ID:' + this.userManager.getUserData.ID, 170, 150, `24px ${this.textRenderer.systemFont}`, '#fff', 'left', 'top')

    const x1 = 104
    const x2 = 588
    const y1 = 320
    const line1 = 50

    // 绘制背景
    const gradient1 = this.ctx.createLinearGradient(92, 242, 496, 44);
    gradient1.addColorStop(0, '#373759'); // 0% 处的颜色
    gradient1.addColorStop(1, 'rgba(55,55,89,0)'); // 100% 处的颜色
    this.ctx.fillStyle = gradient1
    //绘制菜单背景
    this.ctx.fillRect(92, 242, 496, 44);
    this.textRenderer.drawText('统计', 100, 250, `32px ${this.textRenderer.systemFont}`, '#B1D3FF', 'left', 'top')
    // 绘制背景
    const gradient2 = this.ctx.createLinearGradient(92, 675, 496, 44);
    gradient2.addColorStop(0, '#373759'); // 0% 处的颜色
    gradient2.addColorStop(1, 'rgba(55,55,89,0)'); // 100% 处的颜色
    this.ctx.fillStyle = gradient2
    //绘制菜单背景
    this.ctx.fillRect(92, 675, 496, 44);
    this.textRenderer.drawText('分析', 100, 683, `32px ${this.textRenderer.systemFont}`, '#B1D3FF', 'left', 'top')

    //绘制用户昵称文字
    this.textRenderer.drawText('投资次数', x1, y1, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('盈利次数', x1, y1 + line1, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('亏损次数', x1, y1 + line1 * 2, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('平均收益（元）', x1, y1 + line1 * 3, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('平均亏损（元）', x1, y1 + line1 * 4, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('单笔最大收益（元）', x1, y1 + line1 * 5, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('单笔最大亏损（元）', x1, y1 + line1 * 6, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText(0, x2, y1, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1 * 2, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1 * 3, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1 * 4, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1 * 5, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText(0, x2, y1 + line1 * 6, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')


    this.textRenderer.drawText('指标', x1, 750, `24px ${this.textRenderer.systemFont}`, '#B1D3FF', 'left', 'top')
    this.textRenderer.drawText('数值', 314, 750, `24px ${this.textRenderer.systemFont}`, '#B1D3FF', 'left', 'top')
    this.textRenderer.drawText('参考值', 615, 750, `24px ${this.textRenderer.systemFont}`, '#B1D3FF', 'right', 'top')
    this.textRenderer.drawText('胜率', x1, 820, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('盈亏比', x1, 870, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('54.44%', 314, 820, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('0.45', 314, 870, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('>50%', 615, 820, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')
    this.textRenderer.drawText('>1.5', 615, 870, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'right', 'top')

    this.textRenderer.drawText('建议：您的胜率和盈亏比太低，还不适合实战，先', 104, 950, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')
    this.textRenderer.drawText('加强投资技能学习吧。', 104, 990, `24px ${this.textRenderer.systemFont}`, '#ffffff', 'left', 'top')

  }

  //点击开始事件监听
  handleTouchStart(event) {
    const touch = event.touches[0];
    const x = touch.clientX;
    const y = touch.clientY;

    const logicPoint = this.screenAdapter.screenToLogic(x, y);
  }
  //点击结束事件监听
  handleTouchEnd(event) {
    const touch = event.changedTouches[0];
    const x = touch.clientX;
    const y = touch.clientY;

    const logicPoint = this.screenAdapter.screenToLogic(x, y);
    //console.log(`屏幕坐标: (${x},${y}) -> 逻辑坐标: (${logicPoint.x.toFixed(2)},${logicPoint.y.toFixed(2)})`);

    // 检查是否点击了返回按钮
    if (logicPoint.x >= 78 && logicPoint.x <= 124 && logicPoint.y >= 28 && logicPoint.y <= 56) {
      this.pageManager.showPage('home');
    }
  }
  //监听触点移动事件
  handleTouchMove(event) { }
}
